<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style>
			/* 外边距magrin属性 【微调：文字或者图片】
			
			margin使用问题1： 自适应剧中，建议使用div，套块元素，行块内元素，行内元素
			
			margin使用问题2：行元素，上下外边距失效  右左外边距
			行元素：不可以设置高宽【高----不可以动上下】，在一行显示【宽---可以左右】
			
			使用问题3：垂直外边距
			使用问题4：垂直外边距
			*/
		   
			img{
				border: 1px solid skyblue;
				/* margin四个属性值 上 右 下 左 */
				margin: 300px;
				/* margin:2个属性值 顺时针：上下 右左 */
				margin: 10px 20px;
				/* 常用：盒子自适应居中
				行内块：可以设置高宽，在一行内显示，无法居中
				   margin使用问题1：  自适应居中，必须设置宽高
				  */
			    width: 700px;
				height: 200px;
				margin: 0 auto;
				/*   margin:3个属性值 顺时针：上 右左 下  */
				margin: 100px 200px 300px;
				/*  margin:4个属性值 顺时针：上 右 下 左 */
				margin: 100px 200px 300px 400px;
			
			}
			h1{/* 块元素：可以设置高宽，不在一行显示，无法居中，内置文本 
			       text-align:center;
			*/
				width: 100px;
				height: 50px;
				border: 1px solid skyblue;
				margin: 0 auto;
			}
			span{/* 行元素：不可以设置高宽【高----不可以动上下】，在一行显示【宽---可以左右】，无法居中，内置文本
			             text-align：center
			 */
				margin: 0 auto;
			}
			
		</style>
	</head>
	<body>
		<!--框模型，盒子模型：四个部分组成：
		                                外边距：边框以为四周，叫做外边距
										 margin属性
										边框：--
										内边距：边框以内与内容 之间距离，叫做内边距
										内容：块，行，行内元素本身宽高
		
		
		所有元素存在于框模型中  -->
		<h1>块级元素</h1>
		<img src="img/onepiece.png" width="600px" height="240px" alt="Onepiece" />
		<span>行内元素：Onepiece</span>
	</body>
</html>